import React, { useEffect, useState } from 'react';
import {Table,Button,Tag, notification} from 'antd';
import API from '../../../util/api';

export default function AuditList(props) {
    const [dataSource, setdataSource] = useState([]);
    const {username} = JSON.parse(localStorage.getItem("token"));

    useEffect(()=>{
        API.getDraft({
            author:username,
            auditState_ne:'0',
            publishState_lte:'1',
            _expand:'category'
        }).then(res=>{
            setdataSource(res.data);
        })
    },[username]);

    const columns = [
        {
            title: '新闻标题',
            align:'center',
            dataIndex: 'title',
            render: (title,item) => {
                return <a href={`#/news-manage/preview/${item.id}`}>{title}</a>
            }
        },
        {
            title: '作者',
            align:'center',
            dataIndex: 'author'
        },
        {
            title: "新闻分类",
            align:'center',
            dataIndex: 'category',
            render: (category) => {
                return <div>{category.title}</div>
            }
        },
        {
            title: "审核状态",
            align:'center',
            dataIndex: 'auditState',
            render: (auditState) => {
                const colorList = ["",'orange','green','red'];
                const auditList = ["草稿箱","审核中","已通过","未通过"];
                return <Tag color={colorList[auditState]}>{auditList[auditState]}</Tag>
            }
        },
        {
            title: "操作",
            align:'center',
            render: (item) => {
                return <div>
                    {
                        item.auditState===1 &&  <Button type='link' onClick={()=>handleRervert(item)} >撤销</Button>
                    }
                    {
                        item.auditState===2 &&  <Button danger onClick={()=>handlePublish(item)}>发布</Button>
                    }
                    {
                        item.auditState===3 &&  <Button type="primary" onClick={()=>handleUpdate(item)}>更新</Button>
                    }
                </div>
            }
        }
    ];
    const handleRervert = (item)=>{
        setdataSource(dataSource.filter(data=>data.id!==item.id));
        API.passDraft(item.id, {
            auditState:0
        }).then(res=>{
            notification.info({
                message: `通知`,
                description:
                  `您可以到草稿箱中查看您的新闻`,
                placement:"topRight"
            });
  
        })
    }

    const handleUpdate = (item)=>{
        props.history.push(`/news-manage/update/${item.id}`);
    }

    const handlePublish = (item)=>{
        API.passDraft(item.id, {
            "publishState": 2
        }).then(res=>{
            props.history.push('/publish-manage/published');
            notification.info({
                message: `通知`,
                description:
                  `您可以到【发布管理/已经发布】中查看您的新闻`,
                placement:"topRight"
            });
        })
    }
    return (
        <div>
            <Table  dataSource={dataSource} 
                    columns={columns}
                    rowKey={item=>item.id}
                    bordered
            />
        </div>
    )
}
